<template>
  <div class="actEditor">
    <div class="act-editors">
      <div class="editor-bts inlineBlock">
        <router-link to="/ActionEditor">
          <div class="inlineBlock btn">
            <span class="release">发布</span>
          </div>
        </router-link>
        <div class="inlineBlock btn">
          <span class="editor" @click="Editor">编辑</span>
        </div>
        <div class="inlineBlock btn">
          <span class="delete" @click="deleteEvents">删除</span>
        </div>
      </div>
      <div class="search inlineBlock">
        <span></span>
        <input v-model="search" type="text" placeholder="查找标题" @blur="searchRequest" @keyup.enter="searchRequest">
      </div>
    </div>
    <!--    -->
    <div class="table_context">
      <table>
        <thead class="table_head">
        <tr>
          <td></td>
          <td class="styFlex">活动标题</td>
          <td class="styFlex">活动日期</td>
          <td class="styFlex">结束日期</td>
          <td class="styFlex">活动状态</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in tableData">
          <td>
            <input type="checkbox" class="check" :value="item.id" @click="change($event,item.id)">
          </td>
          <td class="styFlex">{{item.title}}</td>
          <td class="styFlex">{{ item.wssbkssj | formatDate}}</td>
          <td class="styFlex">{{ item.wssbjssj | formatDate }}</td>
          <td class="styFlex">
            <div>
              <span class="status colorNoStart" v-show="item.status== 0">未开始</span>
              <span class="status colorGoing" v-show="item.status==1">进行中</span>
              <span class="status colorEnd" v-show="item.status==2">已结束</span>
            </div>
          </td>
        </tr>
        </tbody>


        <div class="t_paging">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-count="pageNum"
            @current-change="pageChange">
          </el-pagination>
        </div>



      </table>
    </div>
  </div>
</template>

<script>
  import Inform from '../js/Inform'
  import "element-ui/lib/theme-chalk/index.css"
  import $ from "jquery";

  export default {
    inject: ['reload'],
    name: "Activity",
    //
    data() {
      return {
        search: "",
        //总页数
        pageNum: 5,
        chooseIds: [],
        // id:编号、type:
        tableData: []
      }
    },
    methods: {
      searchRequest(){
        this.$axios({
          url: "/events/getEventsByTitleSize",
          params:{
            search: this.search,
          },
          method: "get",
        }).then(res=>{
          this.pageNum = res.data
        })
        this.$axios({
          url: "/events/getEventsByTitle",
          method: "get",
          params: {
            search: this.search,
            index: 0
          }
        }).then(res=>{
          this.tableData = res.data
          this.tableData.forEach(function (item) {
            let date = new Date()
            item.status=0
            if (date.getTime()>new Date(item.wssbkssj).getTime()){
              item.status=1
              if (date.getTime()>new Date(item.wssbjssj).getTime()){
                item.status=2
              }
            }
          })
        })
      },
      deleteEvents(){
        if(this.chooseIds.length==0){
          this.$message.error("请选择！")
          return;
        }
        this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            url: "/events/delete",
            method: "post",
            data: this.chooseIds
          }).then(res=>{
            if (res.data){
              this.reload()
            } else {
              this.$message.error("删除失败")
            }
          }).catch(()=>{
            this.$message.error("删除失败")
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      pageChange(pageIndex){
        this.chooseIds = []
        $(".check").prop("checked",false);

        this.$axios({
          url: "/events/getEventsByTitle",
          method: "get",
          params: {
            search: this.search,
            index: pageIndex-1
          }
        }).then(res=>{
          this.tableData = res.data
          this.tableData.forEach(function (item) {
            let date = new Date()
            item.status=0
            if (date.getTime()>new Date(item.wssbkssj).getTime()){
              item.status=1
              if (date.getTime()>new Date(item.wssbjssj).getTime()){
                item.status=2
              }
            }
          })
        })
      },
      change(e,itemId){
        let _this = this
        if (e.target.checked){
          _this.chooseIds.push(itemId)
        } else {
          _this.chooseIds.forEach(function (item,index) {
            if (item==itemId){
              _this.chooseIds.splice(index,1)
            }
          })
        }
      },
      Editor(){
        if (this.chooseIds.length==1){
          this.$router.push({name: 'actionEditor',params: {id: this.chooseIds[0]}})
        } else {
          this.$message.error("只能选择一个活动进行修改！")
        }
      },
    },

    created() {
      this.searchRequest()
    }
  }
</script>


<style src="../css/pageSplit.css" scoped></style>
<style scoped>

  * {
    margin: 0 auto;
    padding: 0;
    cursor: pointer;
  }

  .inlineBlock {
    display: inline-block;
  }

  .actEditor {
    width: 1140px;
    padding: 15px 30px;
  }

  .act-editors {
    height: 60px;
    line-height: 60px;
    width: 100%;
  }

  .editor-bts {
    line-height: 60px;
    width: 300px;
  }

  .btn {
    width: 100%;
    line-height: 30px;
    outline: 1px solid #ffffff;
    border-radius: 3px;
    margin-right: 10px;
    color: white;
  }

  .btn > span {
    display: inline-block;
    width: 40px;
    height: 30px;
    padding-left: 40px;
  }

  .btn{
    width: 80px;
  }
  .btn:hover{
    background-color: #3066E3;
  }

  .release {
    background: url("../assets/release.png") no-repeat 8px 5px;
  }

  .editor {
    background: url("../assets/editor.png") no-repeat 8px 5px;
  }

  .delete {
    background: url("../assets/delete.png") no-repeat 8px 5px;
  }

  .search {
    float: right;
    width: 300px;
    overflow: hidden;
    border: 1px solid #1688ff;
    display: flex;
    border-radius: 30px;
    margin-top: 15px;
  }

  .search > span {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: url("../assets/SS_01.png") no-repeat 10px 10px;
  }

  .search input {
    display: inline-block;
    outline: none;
    border: none;
    color: white;
    font-size: 18px;
    background-color: transparent;
    line-height: 40px;
    width: 100%;
  }

  .table_context {
    color: white;
    height: 700px;
    border-radius: 25px;
    margin-top: 20px;
    width: 100%;
    text-align: center;
    overflow: hidden;
    background-color: rgba(37, 80, 174, 0.55);
  }

  .table_context > table {
    width: 90%;
  }

  .table_head > tr {
    width: 100%;
    display: flex;
    background-color: #014DFF;
    margin-top: 20px;
  }

  .check {
    flex: 0.5;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
  }

  .styFlex:first-child {
    flex: 3;
  }

  .styFlex {
    flex: 1;
  }

  .styFlex:last-child {
    flex: 1;
  }

  table, thead, tbody, tr, td {
    width: 100%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 20px;
  }

  tbody {
    height: 550px;
  }

  tbody td {
    border-bottom: 1px solid #fff;
  }

  tr {
    display: flex;
    line-height: 40px;
  }

  td {
    width: 40px;
    padding: 5px 0;
  }

  .status {
    display: inline-block;
    width: 60px;
    font-size: 13px;
    line-height: 20px;
    padding: 0px 5px;
    border-radius: 10px;
  }

  .colorNoStart {
    background-color: #928c8c;
  }

  .colorGoing {
    background-color: #42b983;
  }

  .colorEnd {
    background-color: #f70000;
  }
</style>
